<script setup lang="ts">
import {onMounted, ref,onBeforeUnmount} from "vue";
import {getProductAll} from "@/api/productApi.ts";

const products = ref([]);
const fetchProductData = () => {
  getProductAll().then(res => {
    products.value = res.data;
  })
}

const intervalId = ref(0);
const startUpdating = () => {
  intervalId.value = setInterval(() => {
    fetchProductData();
  }, 3000);
}

onMounted(() => {
  fetchProductData();
  startUpdating();
});

// 在组件卸载之前清除定时器
onBeforeUnmount(() => {
  if (intervalId.value) {
    clearInterval(intervalId.value);
  }
});

</script>

<template>
  <div class="product">
    <div class="title">
      <span>{{ $t('product.name') }}</span>
      <span>{{ $t('product.newPrice') }}</span>
      <span>{{ $t('product.amplitude') }}</span>
    </div>
    <div class="content">
      <router-link :to="{name:'productDetail',params:{id:item.id}}" v-for="item in products" :class="['content-item',item.class]">
        <div style="color: #000000" class="not-translate">{{ item.product_name }}</div>
        <div>
          <span>{{ item.price }}</span>
          <span style="color: #686969;">{{ $t('product.low')}}{{item.low}}</span>
        </div>
        <div>
          <span>{{ item.priceb }}</span>
          <span style="color: #686969;">{{ $t('product.high')}}{{item.high}}</span>
        </div>
      </router-link>
    </div>
  </div>
</template>

<style scoped lang="less">
@import "../../less/product.less";
</style>